<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试</title>


    <style>
        .tab-content .tab-pane {
            display: none;
            opacity: 0;
            transition : opacity  1s;
        }

        .tab-content .tab-pane.active {
            display: block;
            opacity: 1;
            transition : opacity  1s;

        }

    </style>
</head>
<body>
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="tab-list" data-trigger="test" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<!--tab-content 和 tab-pane 必须有-->
<div id="myTabContent" class="tab-content" data-target="test" >
    <div class="tab-pane active" id="bulletin">公告内容面板</div>
    <div class="tab-pane" id="rule">规则内容面板</div>
    <div class="tab-pane" id="forum">论坛内容面板</div>
    <div class="tab-pane" id="security">安全内容面板</div>
    <div class="tab-pane" id="welfare">公益内容面板</div>
</div>



<script>
    function Tab(option) {
        this.tabList = document.querySelector(option.tabList)  ; //菜单列表容器
        var trigger = this.tabList.getAttribute("data-trigger"); //用来识别对应目标容器
        this.target = document.querySelector(".tab-content[data-target=" +  trigger + "]");//目标容器
        this.tabPanes = Array.prototype.slice.call( this.target.getElementsByClassName("tab-pane") ); //，，目标tab-pane 元素数组
        this.tabListItems = this.tabList.querySelectorAll("li");
    }

    Tab.prototype.init = function () {
        this.bindEvent();
    };

    //显示选项卡
    Tab.prototype.show = function(elem) {
        var tabPane = document.querySelector( elem.getAttribute("href") );

        elem.parentNode.classList.add("active");
        tabPane.classList.add('active');
    };

    //隐藏全部
    Tab.prototype.hideAll = function() {
        this.tabListItems.forEach(function (item) {
            item.classList.remove("active");
        });
        this.tabPanes.forEach(function (item) {
            item.classList.remove("active");
        })
    };


    Tab.prototype.bindEvent = function() {
        var This = this;
        This.tabList.addEventListener('click',function (e) {
            e = e || window.event;
            var target = e.target ||e.srcElement;

            if (target.getAttribute('data-toggle') == 'tab' ){
                This.hideAll();
                This.show(target);
            }

            e.preventDefault();
            return false
        })

    };

    var myTab = new Tab({
        tabList: "#myTab"
    });

    myTab.init();




</script>
</body>
</html>